<template>
	<el-table ref="table" class="custom-table" v-bind="$attrs" v-on="$listeners" @row-click="rowClick" border fit style="width: 100%" :data="data" :class="'normal-talbe'" :column-height="columnHeight" row-key="id">
		<el-table-column v-for="(one) in columnList" :key="one" min-width="160" :label="fieldsMap[one]">
		</el-table-column>
	</el-table>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  name: 'sheetTable',
  components: {}
})
export default class extends Vue {
  @Prop({ default: () => [] }) public data!: boolean;
  @Prop({ default: () => [] }) public columnList!: any[];
  @Prop({ default: () => ({}) }) public form!: any;
  @Prop({ default: () => ({}) }) public fieldsMap!: any;
  @Prop({ default: 60 }) public columnHeight!: number;

  private rowClick (row) {
    this.$emit('row-click1', row);
  }
}
</script>
<style lang="stylus" scoped>
.custom-table {
	border-radius 4px
}
.normal-talbe {
	/deep/.cell {
		// text-align center
		.select-item {
			padding-right 0
		}
	}
	/deep/.selection-label {
		padding-top 8px
		.cell {
			padding-left 10px
		}
	}
}
</style>
